import React, { PureComponent } from "react"
import { CSSTransition, SwitchTransition, TransitionGroup } from "react-transition-group"
import "./style.css"
export class App extends PureComponent {
    constructor() {
        super()
        this.state = {
            books: [
                {
                    name: "你不知道JS",
                    price: 99,
                },
                {
                    name: "JS高级程序设计",
                    price: 89,
                },
            ],
        }
    }
    addNewBook() {
        const books = [...this.state.books]
        books.push({ name: "jjj", price: 11 })
        this.setState({
            books,
        })
    }

    render() {
        const { books } = this.state
        return (
            <div>
                <h2>图书清单：</h2>
                <TransitionGroup component="ul">
                    {books.map((item) => {
                        return (
                            <CSSTransition key={item.name} classNames="book" timeout={2000}>
                                <li>
                                    {item.name}--{item.price}
                                </li>
                            </CSSTransition>
                        )
                    })}
                </TransitionGroup>
                <button onClick={(e) => this.addNewBook()}>添加</button>
            </div>
        )
    }
}

export default App
